@import "~colors.scss";

$exit-image-size: 40px;
$header-height: 50px;

.app-header {
    display: flex;
    justify-content: space-between;
    background-color: $header-color-1;
    .logout {
        span {
            background-image: url("~images/exit.svg");
            float: right;
            display: block;
            width: $header-height;
            height: $header-height;
            background-repeat: no-repeat;
            background-size: $exit-image-size;
            background-position: 8px 6px;
        }
    }
    button {
        cursor: pointer;
        border: none;
        text-transform: uppercase;
        font-size: 1.5em;
        height: $header-height;
        padding: 3px 10px;
    }
    .header-item-wrapper {
        width: 150px;
    }
    .add-btn {
        background-color: $new-color-1;
    }
    .cancel-btn {
        background-color: $cancel-color;
        color: #EEE;
    }
    .r-link {
        color: $color-background;
        background-color: $header-color-1;
    }
    .r-link:hover {
        background-color: $header-color-2;
    }
    .r-link.router-link-active {
        background-color: $color-background;
        color: $header-color-1;
    }
}